<template>
  <div class="py-[10px]">
    <p class="font-semibold text-[15px]">菜单信息</p>
    <div class="mt-[20px]">
      <el-form ref="formRef" :rules="rules" label-width="100" label-position="left" :model="props.button">
        <el-form-item label="名称" prop="name">
          <el-input v-model="props.button.name" placeholder="仅支持中英文和数字"></el-input>
        </el-form-item>
        <el-form-item label="消息类型">
          <el-radio-group v-model="props.button.type">
            <el-radio v-for="p in radioList" @change="changeRadio" :key="p.id" :label="p.id">{{ p.name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单内容" v-if="props.button.type === 'click'">
          <div class="flex flex-row justify-start flex-wrap">
            <div
              class="px-[12px] py-[4px] bg-[#f6f7f8] cursor-pointer hover:text-[#07c160]"
              v-for="(p, index) in menuList"
              :key="index"
              @click="choose(p)"
            >
              {{ p.name }}
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="props.button.type === 'click' && props.button.img_url" prop="media_id">
          <div class="relative">
            <el-image class="w-400px" fit="scale-down" :src="props.button.img_url"></el-image>
            <div
              class="absolute right-[-60px] top-[10px] rounded-[50%] flex flex-col justify-center p-8px cursor-pointer"
              style="box-shadow: 3px 3px 10px rgb(0 0 0 / 40%)"
              @click="deleteMaterial"
            >
              <el-icon size="25"><Delete /></el-icon>
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="props.button.type === 'click' && nowChooseType === 'text'">
          <!-- <Editor ref="edRef" v-model:text="props.button.message"></Editor> -->
          <el-input
            type="textarea"
            :input-style="{ width: '300px', height: '200px' }"
            :autosize="false"
            v-model="props.button.message"
          ></el-input>
        </el-form-item>
        <el-form-item label="网页链接" v-if="props.button.type === 'view'" prop="url">
          <el-input v-model="props.button.url" placeholder="公众号链接"></el-input>
        </el-form-item>
        <el-form-item label="appid" v-if="props.button.type === 'miniprogram'" prop="appid">
          <el-input v-model="props.button.appid"></el-input>
        </el-form-item>
        <el-form-item label="小程序路径" v-if="props.button.type === 'miniprogram'" prop="pagepath">
          <el-input v-model="props.button.pagepath"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="mt-80px text-center">
      <el-button type="primary" @click="submit" v-auth="'添加'">保存并发布</el-button>
    </div>
    <sucai ref="suRef" @confirm="getSuCai"></sucai>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import sucai from "./sucai.vue";
import { buttons } from "@/views/app/wechat/menus/interface/index";
import { FormInstance, FormRules } from "element-plus";
// import Editor from "@/views/app/wechat/menus/components/editor/index.vue";
import { CheckPath, ValidHttps } from "@/utils/eleValidate";

interface Props {
  button?: buttons;
}

const props = withDefaults(defineProps<Props>(), {
  button() {
    return { name: "菜单名称", type: "click", sub_button: [] };
  }
});

const radioList = ref([
  { name: "发送消息", id: "click" },
  { name: "跳转页面", id: "view" },
  { name: "跳转小程序", id: "miniprogram" }
]);

// 菜单内容
const menuList = ref([
  // { type: "news", name: "图文消息" },
  { type: "text", name: "文字" },
  { type: "image", name: "图片" }
  // { type: "voice", name: "音频" },
  // { type: "video", name: "视频" }
]);

// 选择内容
const suRef = ref<InstanceType<typeof sucai> | null>();
const choose = (p: any) => {
  if (p.type !== "text") {
    suRef.value?.open(p.type);
    props.button.message = "";
  } else {
    nowChooseType.value = "text";
    props.button.media_id = "";
    props.button.img_url = "";
  }
};

// 获取素材
const nowChooseType = ref<"image" | "video" | "voice" | "news" | "" | "text">("");
const emits = defineEmits(["update:button", "submitMenu"]);
const getSuCai = (p: any) => {
  if (props.button.type === "click") {
    props.button.media_id = p.cont.media_id;
    nowChooseType.value = p.type;
    props.button.img_url = p.cont.url; //设置当前的图片地址

    emits("update:button", props.button);
  } else if (props.button.type === "view") {
    // 跳转网页
  } else if (props.button.type === "miniprogram") {
    // 跳转小程序
  }
};

// 删除素材
const deleteMaterial = () => {
  props.button.img_url = "";
  props.button.media_id = "";
  nowChooseType.value = "";
};

// 提交
const checkName = (rule: any, value: any, callback: any) => {
  if (!/^[0-9a-zA-Z\u4e00-\u9fa5]+$/.test(value)) {
    return callback(new Error("菜单名称只包含中文字母数字"));
  } else if (value.length > 5 && props.button.level === 1) {
    return callback(new Error("一级菜单最多4个字"));
  } else if (value.length > 9 && props.button.level === 2) {
    return callback(new Error("二级菜单最多8个字"));
  } else if (!value) {
    return callback(new Error("菜单不可为空"));
  } else {
    return callback();
  }
};

const rules = ref<FormRules>({
  name: [{ required: true, validator: checkName, trigger: "blur" }],
  url: [{ required: true, validator: ValidHttps, trigger: "blur" }],
  appid: [{ required: true, message: "无效的appid", max: 100, min: 1, type: "string", trigger: "blur" }],
  pagepath: [{ required: true, validator: CheckPath, trigger: "blur" }]
});

const formRef = ref<FormInstance>();
const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (!valid) return;
    emits("submitMenu");
  });
};

// 初始化数据
const changeRadio = (val: any) => {
  if (val === "click") {
    props.button.appid = "";
    props.button.media_id = "";
    props.button.pagepath = "";
    props.button.url = "";
  } else if (val === "view") {
    props.button.appid = "";
    props.button.media_id = "";
    props.button.pagepath = "";
    props.button.message = "";
    props.button.img_url = "";
    nowChooseType.value = "";
  } else if (val === "miniprogram") {
    props.button.media_id = "";
    props.button.pagepath = "";
    props.button.message = "";
    props.button.img_url = "";
    props.button.url = "";
    nowChooseType.value = "";
  }
};
</script>

<style></style>
